<template>
	<view>
		<view class="top">
			<image bg src="/static/img/me/bg.jpg"></image>
			<view txt>最新影片，免费看</view>
		</view>
		<view class="row">
			<c-type-list class="his" title="true" :data="hisData.list"
				scrollX mini fullTitle @click="hisHandle">
				<template #txt>
					<icons style="margin-right: 20rpx;" size="16px" type="time" color="#007aff"></icons>
					<text txt>历史记录</text>
				</template>
			</c-type-list>
			<c-cell label="我的下载" iconL="download" iColorL="#9c630c" iconR="arrowright" />
			<c-cell label="我喜欢的" iconL="heart" iColorL="#b1082f" iconR="arrowright" />
		</view>
		<view class="share">
			<c-cell label="分享好友" iconL="redo" iColorL="#8008b1" iconR="arrowright" />
		</view>
		<view>
			<c-cell label="设置" iconL="gear" iColorL="#016f0f" iconR="arrowright" />
			<c-cell label="意见反馈" iconL="compose" iColorL="#b13100" iconR="arrowright" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 最近观看
				hisData: {}
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(true); // 隐藏系统-状态栏
			// #endif
			this.init()
		},
		methods: {
			init() {
				// 最近都在看
				this.hisData = {
					id: 1, title: '历史记录', sum: 7, list: [
					{ id: 1, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 2, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 3, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 4, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 5, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' },
					{ id: 6, name: '釜山行2', up: '更新至8集', img: '/static/img/roll/1.jpg' }
				]}
			},
			// 历史记录
			hisHandle(row) {
				console.log(row)
				if (!row) {
					const { id, title } = this.hisData
					const params = `id=${id}&title=${title}`
					uni.navigateTo({
						url: '/pages/tabs/home/list?' + params
					})
				}
			}
		}
	}
</script>
<style>
	page{ background-color:#ececec; } 
</style>
<style lang="scss" scoped>
.top{
	position: relative;
	margin-bottom: 14rpx;
	[bg]{
		width: 100%;
		height: 268rpx;
	}
	[txt]{
		position: absolute;
		bottom: 80rpx;
		left: 30%;
		transform: translateX(-20%);
		color: #c5c5c5;
		font-size: 64rpx;
		font-weight: bold;
	}
}
// 第二块
.row{
	background-color: #fff;
	.his{ // 历史记录
		border-bottom: 2rpx solid #e4e4e4;
		padding-left: 20rpx;
		::v-deep >[title]{padding: 10px 10px 0 0;}
		[txt]{ font-size: 24rpx;}
	}
}
// 分享
.share{margin: 16rpx 0;}
// 块
.cell{
	background-color: #fff;
	padding: 20rpx;
	border-bottom: 2rpx solid #e4e4e4;
	.icon{margin-right: 20rpx;}
	[txt]{font-size: 24rpx;}
	.right{float: right;margin-top: 10rpx;}
}
</style>
